<template>
	<view>
		<home v-show="curType=='home'" :curPage="0"></home>
		<find v-show="curType=='find'" :curPage="1"></find>
		<square v-show="curType=='square'" :curPage="2"></square>
		<user v-show="curType=='user'" :curPage="3"></user>
		<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'upx'}" :class="$store.state.AppStyle">
			<view class="tabbar-operate-bg" :class="isPost?'show':''" @tap="isPost=false"></view>
			<view class="tabbar-operate" :class="isPost?'show':''" :style="{'padding-bottom': paddingBottomHeight + 'upx'}">
				<view class="tabbar-operate-main grid col-4">
					<view class="index-sort-box">
						<view class="index-sort-main"  @tap="toLink('../edit/articleNew')">
							<view class="index-sort-i" style="background: rgba(30, 134, 231, 0.2);">
								<text class="cuIcon-writefill" style="color:  #1e86e7;"></text>
							</view>
							<view class="index-sort-text">
								文章
							</view>
						</view>
					</view>
					<view class="index-sort-box">
						<view class="index-sort-main"  @tap="toLink('../forum/section?type=2')">
							<view class="index-sort-i" style="background: rgba(231, 44, 7, 0.2);">
								<text class="cuIcon-discoverfill" style="color:  #e72c07;"></text>
							</view>
							<view class="index-sort-text">
								帖子
							</view>
						</view>
					</view>
					<view class="index-sort-box">
						<view class="index-sort-main" @tap="toLink('../space/post?type=0')">
							<view class="index-sort-i" style="background: rgba(21, 159, 44, 0.2);">
								<text class="cuIcon-creativefill" style="color:  #159f2c;"></text>
							</view>
							<view class="index-sort-text">
								动态
							</view>
						</view>
					</view>
					<view class="index-sort-box">
						<view class="index-sort-main" @tap="toLink('../edit/addshop')">
							<view class="index-sort-i" style="background: rgba(255, 0, 127, 0.2);">
								<text class="cuIcon-cartfill" style="color:  #ff007f;"></text>
							</view>
							<view class="index-sort-text">
								商品
							</view>
						</view>
					</view>
				</view>
			</view>
			<block  v-for="(item, index) in list" 
				    :key="index">
				
				<view class="tabbar-item" @tap="tabbarChange(item.type,index)">
				    <image class="item-img" :src="item.icon_a+curStyle+'.png'" v-if="curType == item.type"></image>
				    <image class="item-img" :src="item.icon" v-else></image>
				    <view class="item-name" :class="{'tabbarActive': curType == item.type}" v-if="item.text">{{item.text}}</view>
				</view>
				<view class="tabbar-item addPost" v-if="index==1" @tap="isPost=!isPost" :class="isPost?'postShow':''">
					<view class="addPost-main">
						<view class="addPost-i">
							 <text class="cuIcon-add"></text>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		<!--弹窗公告-->
		<!-- <view class="announcement" v-if="isAnnouncement&&Update!=1">
			<view class="announcement-bg" @tap="isAnnouncement=false">
				
			</view>
			<view class="announcement-main">
				<view class="announcement-title">
					全站公告
					<text class="cuIcon-close text-red" @tap="isAnnouncement=false"></text>
				</view>
				<view class="announcement-concent">
					<rich-text :nodes="announcement"></rich-text>
				</view>
				<view class="announcement-btn">
					<button class="cu-btn bg-gradual-blue lg" @tap="readAnnouncement">我知道了</button>
				</view>
			</view>
		</view> -->
		<!--update-->
		<!--  #ifdef APP-PLUS -->
		<view class="update" v-if="Update==1">
			<view class="update-bg">
				
			</view>
			<view class="update-box">
				<view class="update-main">
					<image src="../../static/app-plus/ic_ar.png"></image>
					<view class="update-title">发现新版本：{{versionTitle}}</view>
					<view class="update-intro"><rich-text :nodes="versionIntro"></rich-text></view>
					<view class="update-btn grid col-2">
						<view class="update-btn-box">
							<view class="update-btn-main bg-blue"  @tap="isUpdate(true)">
								确定
							</view>
						</view>
						<view class="update-btn-box">
							<view class="update-btn-main bg-gray" @tap="closeUpdate()">
								取消
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  #endif -->
		<!--#ifdef APP-PLUS-->
		<view class="Startupmap" v-if="!isStart&&isvip==0">
			<view class="Startupmap-close" @tap="toStart">
				<text>跳过</text>
			</view>
			<view class="Startupmap-pic" @tap="toStartUrl">
				<image :src="startImg.localUrl"></image>
				<!-- <image src="_doc/uniapp_save/16631684216820.png"></image> -->
			</view>
		</view>
		<!--#endif-->
	</view>
	
</template>

<script>
import { localStorage } from '../../js_sdk/mp-storage/mp-storage/index.js'
export default {
    data() {
        return {
			isPost:false,
            paddingBottomHeight: 0,  //苹果X以上手机底部适配高度
            list: [{
                    text: '首页',  
                    icon: '/static/tabbar/home.png',  //未选中图标
                    icon_a: '/static/tabbar/home_',  //选中图片
                    type: "home",
                },{
                    text: '发现',
                    icon: '/static/tabbar/find.png',
                    icon_a: '/static/tabbar/find_',
					type: "find",
                }
                ,{
                    text: '广场',
                    icon: '/static/tabbar/square.png',
                    icon_a: '/static/tabbar/square_',
                    type: 'square',
                },{
                    text: '我的',
                    icon: '/static/tabbar/user.png',
                    icon_a: '/static/tabbar/user_',
                    type: "user",
                },
            ],
			curType:"home",
			curStyle:"blue",
			curPage:0,
			isStart:false,
			
			pageShow:false,
        };
    },
	onHide() {
		var that = this;
		that.pageShow = false;
	},
	onUnload() {
		var that = this;
		that.pageShow = false;
	},
	onBackPress(){
		// #ifdef APP-PLUS
		this.backButtonPress++;
		if (this.backButtonPress > 1) { 
			plus.runtime.quit();
		} else {
			plus.nativeUI.toast('再按一次退出应用');
		} 
		setTimeout(()=> {
			this.backButtonPress = 0;
		}, 1000);
		// #endif
		return true;
	},
	onPullDownRefresh(){
		
	},
	onShow() {
		
		
	},
	//触底监听
	onReachBottom() {
		var that = this;
		uni.$emit('onReachBottom', "");
	},
	
    onLoad() {
		var that = this;
        uni.getSystemInfo({
            success: function (res) {
                let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
        		console.log("当前设备型号："+res.model)
                model.forEach(item => {
        			
                    //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
                    if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
                        that.paddingBottomHeight = 40;
                    }
                })
            }
        });
		if(localStorage.getItem('appStyle')){
			var appStyle = localStorage.getItem('appStyle');
			
			var curStyle = "blue";
			that.curStyle = "blue";
			if(appStyle.indexOf("blue")!=-1){
				curStyle = "blue";
				that.curStyle = "blue";
			}
			if(appStyle.indexOf("pink")!=-1){
				curStyle = "pink";
				that.curStyle = "pink";
			}
			if(appStyle.indexOf("orange")!=-1){
				curStyle = "orange";
				that.curStyle = "orange";
			}
			if(appStyle.indexOf("green")!=-1){
				curStyle = "green";
				that.curStyle = "green";
			}
			// that.$store.state.AppStyle = that.appStyle;
			that.$store.commit('setStyle', appStyle);
			console.log(that.$store.state.AppStyle)
			
			
		}
		
    },
	onReady() {
		setTimeout(function() {
			uni.$emit('onShow', 0);
		}, 200); 
	},
    methods: {
        tabbarChange(type,index) {
			var that = this;
			that.isPost = false;
			that.curPage = index;
            that.curType = type;
			setTimeout(function() {
				uni.$emit('onShow', index);
			}, 200); 
			
        },
		
    }
};
</script>

<style>
    
</style>
